<template>
  <div style="display: flex; justify-content: space-between" class="container">
    <a-card style="width: 60%;height: 85vh;">
      <div style="text-align: left;font-weight: bold; color: black">
        数据总览
      </div>
      <!--  总览数据    -->
      <a-grid :cols="24" :row-gap="16">
        <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
          <a-space>
            <a-avatar :size="54">
              <img
                  alt="avatar"
                  src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image"
              />
            </a-avatar>
            <a-statistic
                title="总帖子数量"
                :value="7"
                :value-from="0"
                animation
                show-group-separator
            >
            </a-statistic>
          </a-space>
        </a-grid-item>
        <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
          <a-space>
            <a-avatar :size="54">
              <img
                  alt="avatar"
                  src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image"
              />
            </a-avatar>
            <a-statistic
                title="总用户数"
                :value="6"
                :value-from="0"
                animation
                show-group-separator>

            </a-statistic>
          </a-space>
        </a-grid-item>
        <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }">
          <a-space>
            <a-avatar :size="54">
              <img
                  alt="avatar"
                  src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image"/>
            </a-avatar>
            <a-statistic
                title="总商品数"
                :value="20"
                :value-from="0"
                animation
                show-group-separator>

            </a-statistic>
          </a-space>
        </a-grid-item>
        <a-grid-item
            :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
            style="border-right: none">
          <a-space>
            <a-avatar :size="54">
              <img
                  alt="avatar"
                  src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image"
              />
            </a-avatar>
            <a-statistic
                title="总展览数"
                :value="8"
                :value-from="0"
                animation>

            </a-statistic>
          </a-space>
        </a-grid-item>
        <a-grid-item :span="24">
          <a-divider/>
        </a-grid-item>
      </a-grid>
      <div style="text-align: left;font-weight: bold; color: black">
        近七天数据折线图
      </div>
      <!--  近7天数据    -->
      <div style="width: 100%;height: 40vh;text-align: left;">
        <div style="margin-top: 10px">
          <a-radio-group type="button" v-model="now_type" @change="change_type">
            <a-radio value="播放量">新增用户</a-radio>
            <a-radio value="评论量">新增帖子</a-radio>
            <a-radio value="收藏量">新增商品</a-radio>
            <a-radio value="点赞量">新增展览</a-radio>
          </a-radio-group>
        </div>
        <line_graph v-if="loading_component" :data="data" :type="now_type"></line_graph>
        <div v-else style="width: 100%;height: 100%;align-items: center;display: flex;justify-content: center">
          <a-spin dot/>
        </div>
      </div>
    </a-card>
    <a-card style="flex: 1; margin-left: 10px;">
      <div style="text-align: left;font-weight: bold; color: black">
        帖子Top10
      </div>
      <!--  历史最高数据    -->
      <div style="display: flex;justify-content: space-between;flex-direction: column;height: 77vh">
        <div>
          <a-tabs
              style="position: absolute;width: 33vw;"
              :active-key="activeKey"
              @change="handleTabChange">

            <a-tab-pane key="0" title="点赞数">
              <a-scrollbar style="height:60vh;overflow: auto;width:100%;margin-top: 5px">
                <rank_top10 v-if="whetherLoad[0]" :platform="map[0]"></rank_top10>
              </a-scrollbar>
            </a-tab-pane>
            <a-tab-pane key="1" title="收藏数">
              <a-scrollbar style="height:60vh;overflow: auto;width:100%;margin-top: 5px">
                <rank_top10 v-if="whetherLoad[1]" :platform="map[1]"></rank_top10>
              </a-scrollbar>
            </a-tab-pane>
          </a-tabs>
        </div>
        <div>
          <a-button
              style="width:100%;border-radius: 20px;position:relative;bottom: 10px;"
              @click="this.$router.push({path: '/homes/data_detail', query: {platform: activeKey}})">
            查看详细数据
          </a-button>
        </div>

      </div>
    </a-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import line_graph from "./components/line_graph.vue"
import rank_top10 from "./components/rank_top10.vue"

import {data7dayList, statsSummary, top10DataList} from "../../api/monitorManageMG.js";
import {Message} from "@arco-design/web-vue";
// ----------------------------------------------------------------
// 近7天数据获取
const data = ref([]);
const now_type = ref("播放量")
const loading_component = ref(false)
// data7dayList
const fetch7DayData = async () => {
  try {
    data.value = await data7dayList();
    loading_component.value = true
    console.log(data.value)
  } catch (error) {
    Message.error(error.message);
  }
};
const change_type = () => {
  console.log(now_type.value)
}
// ---------------------------------------------------------
// 切换tab相关
const activeKey = ref("0");
const top10Data = ref()
const map = ["抖音", "小红书", "知乎", "微信公众号", "微信视频号"];
const whetherLoad = [false, false, false, false, false]
whetherLoad[activeKey.value] = true
const platformData = {};

//获取top10的数据
async function fetchTop10Data(params) {
  if (!platformData[params.platform]) {
    try {
      top10Data.value = await top10DataList(params);
    } catch (error) {
      Message.error(error.message);
    }
    platformData[params.platform] = top10Data.value
  } else {
    top10Data.value = platformData[params.platform]
    console.log(top10Data.value)
  }
  return platformData[params.platform];
}

// 当标签切换时
const handleTabChange = async (key) => {
  activeKey.value = key
  whetherLoad[key] = true
};
//----------------------------------------------------------------
// 获取数据总览
const statsData = ref({
  "total_views": 627,
  "total_comments": 1,
  "total_likes": 5,
  "total_collects": 1,
  "total_shares": 0
})

async function fetchStatsData(params) {
  try {
    const res = await statsSummary(params);
    statsData.value.total_views = res.total_views
    statsData.value.total_comments = res.total_comments
    statsData.value.total_likes = res.total_likes
    statsData.value.total_collects = res.total_collects
    statsData.value.total_shares = res.total_shares
  } catch (error) {
    Message.error(error.message);
  }
}

// -------------------------------------------------------
// 组件挂载
onMounted(async () => {
  console.log('组件已挂载到DOM！');
  top10Data.value = await fetchTop10Data({'platform': map[activeKey.value]})
  // 总数据加载
  await fetchStatsData()
  // 折线图数据加载
  await fetch7DayData()

});
</script>

<style scoped>

</style>